<html>
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   
      <title>7.5. Creaci&oacute;n de un custom propio para una aplicaci&oacute;n de gvHIDRA</title>
      <meta name="generator" content="DocBook XSL-NS Stylesheets V1.75.2">
      <link rel="home" href="indice.html" title="Manual Usuario gvHidra">
      <link rel="up" href="ch07.html" title="Cap&iacute;tulo 7. Conceptos Avanzados">
      <link rel="prev" href="ch07s04.html" title="7.4. Envio de correo desde mi aplicaci&oacute;n">
      <link rel="next" href="ch08.html" title="Cap&iacute;tulo 8. Bitacora de cambios aplicados a gvHidra">
   </head>
   <body bgcolor="white" text="black" link="#0000FF" vlink="#840084" alink="#0000FF">
      <div class="navheader">
         <table width="100%" summary="Navigation header">
            <tr>
               <th colspan="3" align="center">7.5. Creaci&oacute;n de un custom propio para una aplicaci&oacute;n de gvHIDRA</th>
            </tr>
            <tr>
               <td width="20%" align="left"><a accesskey="p" href="ch07s04.html">Anterior</a>&nbsp;
               </td>
               <th width="60%" align="center">Cap&iacute;tulo 7. Conceptos Avanzados</th>
               <td width="20%" align="right">&nbsp;<a accesskey="n" href="ch08.html">Siguiente</a></td>
            </tr>
         </table>
         <hr>
      </div>
      <div class="section" title="7.5. Creaci&oacute;n de un custom propio para una aplicaci&oacute;n de gvHIDRA">
         <div class="titlepage">
            <div>
               <div>
                  <h2 class="title" style="clear: both"><a name="d4e4896"></a>7.5. Creaci&oacute;n de un custom propio para una aplicaci&oacute;n de gvHIDRA
                  </h2>
               </div>
            </div>
         </div>
             
         
             
         <p><a name="C7CustomPropio"></a>El prop&oacute;sito del presente manual es servir como
                una gu&iacute;a para que, partiendo de un custom de aplicaci&oacute;n b&aacute;sico (el custom
                "default" incluido en la distribuci&oacute;n), podamos modificar/a&ntilde;adir
                caracter&iacute;sticas propias para nuestra aplicaci&oacute;n .
         </p>
         
             
         <p>El manual no explica sintaxis u opciones del lenguaje de hojas de
                estilo css, para ello ya hay varios tutoriales en la web que se pueden
                consultar par un conocimiento mas amplio de css.
         </p>
         
             
         <p>Lo que se especificar&aacute; a lo largo del manual ser&aacute;, la
                correspondencia entre las diferentes partes de una ventana de una
                aplicaci&oacute;n gvHIDRA (barra superior, inferior, paneles, botones, etc), y
                los clases o secciones dentro del archivo .css responsables de controlar
                las caracter&iacute;sticas y apariencias de dichas partes .
         </p>
         
             
         <div class="section" title="7.5.1. Pasos previos">
            <div class="titlepage">
               <div>
                  <div>
                     <h3 class="title"><a name="d4e4901"></a>7.5.1. Pasos previos
                     </h3>
                  </div>
               </div>
            </div>
                  
            
                  
            <p>Para no empezar desde cero y ahorrarnos tiempo de teclear muchas
                     directivas, primero copiamos un custom base que esta incluido en la
                     distribuci&oacute;n (el directorio "default" que esta en
                     /ruta-de-nuestro-proyecto/igep/custom/ ) y lo pegamos en la misma ruta
                     (cambi&aacute;ndole de nombre al que queremos que sea el nombre de nuestro
                     custom) .
            </p>
            
                  
            <p>Una vez hecho eso modificamos las rutas dentro de los siguientes
                     archivos para que
            </p>
            
                  
            <div class="itemizedlist">
               <ul class="itemizedlist" type="disc">
                  <li class="listitem">
                               
                     <p>/ruta-de-nuestro-proyecto/igep/custom/nuestroCustom/<span class="bold"><strong>include.php</strong></span></p>
                             
                  </li>
                  <li class="listitem">
                               
                     <p>/ruta-de-nuestro-proyecto/igep/custom/nuestroCustom/<span class="bold"><strong>include_class.php</strong></span></p>
                             
                  </li>
               </ul>
            </div>
            
                  
            <p>y donde haya una referencia a "<span class="emphasis"><em>default</em></span>" la
                     remplazamos por el nombre que le hemos dado al directorio de nuestro
                     custom .
            </p>
            
                  
            <p>Por ultimo modificamos la directiva de configuraci&oacute;n <span class="bold"><strong>&lt;customDirName&gt;</strong></span> en el archivo
                     /ruta-de-nuestro-proyecto/igep/<span class="bold"><strong>gvHidraConfig.inc.xml</strong></span> indicando el nombre de
                     nuestro directorio de custom (solamente el nombre, no la ruta
                     completa):
            </p>
            <div class="informalexample">
                         
               
                         <pre class="programlisting">&lt;customDirName&gt;nombre-dir-custom&lt;/customDirName&gt;</pre>
                       </div>
            
                  
            <p>y adem&aacute;s especificamos el nombre de nuestra aplicaci&oacute;n en el
                     fichero /ruta-de-nuestro-proyecto/<span class="bold"><strong>gvHidraConfig.inc.xml</strong></span>:
            </p>
            <div class="informalexample">
                         
               
                         <pre class="programlisting">&lt;applicationName&gt;nombre_app&lt;/applicationName&gt;</pre>
                       </div>
                
         </div>
         
             
         <div class="section" title="7.5.2. Correspondencias entre ventanas y c&oacute;digo en el archivo aplicacion.css">
            <div class="titlepage">
               <div>
                  <div>
                     <h3 class="title"><a name="d4e4923"></a>7.5.2. Correspondencias entre ventanas y c&oacute;digo en el archivo
                              aplicacion.css
                     </h3>
                  </div>
               </div>
            </div>
                  
            
                  
            <p>Vamos a describir la correspondencia entre las partes de la
                     ventana con cada una de los
            </p>
            
                  
            <p>selectores que se definen en el archivo /ruta de nuestro
                     custom/css/<span class="bold"><strong>aplicacion.css</strong></span></p>
            
                  
            <div class="itemizedlist">
               <ul class="itemizedlist" type="disc">
                  <li class="listitem">
                               
                     <p><span class="bold"><strong>.formularios:</strong></span></p>
                     
                               
                     <p>Controla las caracter&iacute;sticas de los diferentes formularios de
                                  la aplicaci&oacute;n (tanto en modo tabular como registro), en &eacute;l, podemos
                                  cambiar el tama&ntilde;o de las fuentes, el borde, el color, el background,
                                  ...
                     </p>
                     
                               
                     <p>Aqu&iacute; vemos el aspecto en una ventana con la definici&oacute;n por
                                  defecto:
                     </p>
                     
                               
                     <div class="mediaobject" align="center"><img src="images/1.png" align="middle"></div>
                     
                               
                     <p>Si cambiamos el font-size (tama&ntilde;o), el font-weight(bold =
                                  negrita), y el color de fondo (background)
                     </p>
                     
                               
                     <div class="informalexample">
                                    
                        
                                    <pre class="programlisting">.formularios {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 16px;
   font-weight: bold;
   border: 0px;
   color: #857256;
   background-color: #cfcfcf;
}</pre>
                                  </div>
                     
                               
                     <p>Ver&iacute;amos los siguientes cambios en el aspecto :</p>
                     
                               
                     <div class="mediaobject" align="center"><img src="images/2.png" align="middle"></div>
                             
                  </li>
                  <li class="listitem">
                               
                     <p><span class="bold"><strong>.text:</strong></span></p>
                     
                               
                     <p>Estilo que se aplica a la etiqueta que acompa&ntilde;a a un elemento
                                  de tipo radiobutton.
                     </p>
                             
                  </li>
                  <li class="listitem">
                               
                     <p><span class="bold"><strong>.menu y .submenu:</strong></span></p>
                     
                               
                     <p>Estilo de los men&uacute;s y submen&uacute;s de la pantalla inicial.</p>
                             
                  </li>
                  <li class="listitem">
                               
                     <p><span class="bold"><strong>.cabecerainicial:</strong></span></p>
                     
                               
                     <p>Se corresponde con la barra superior de la p&aacute;gina, en la que
                                  figura el nombre del usuario validado en el centro de la barra, y
                                  alineado a la derecha veremos el bot&oacute;n de salida de la aplicaci&oacute;n si
                                  nos encontramos en la pantalla inicial, y en caso de que nos
                                  encontremos en una de las ventanas de la aplicaci&oacute;n tambi&eacute;n veremos
                                  el bot&oacute;n de regreso a la pantalla principal.
                     </p>
                     
                               
                     <div class="mediaobject" align="center"><img src="images/3.png" align="middle"></div>
                     
                               
                     <p>Probamos cambiar el color al negro, y la alineaci&oacute;n de texto a
                                  izquierda:
                     </p>
                     
                               
                     <div class="informalexample">
                                    
                        
                                    <pre class="programlisting">.cabecerainicial {
   font-size: 12px; 
   font-weight: bold;
   color: #000000;
   text-align: left;
   background-color: #B2691B;
}</pre>
                                  </div>
                     
                               
                     <div class="mediaobject" align="center"><img src="images/4.png" align="middle"></div>
                             
                  </li>
                  <li class="listitem">
                               
                     <p><span class="bold"><strong>.fondo_titaplic:</strong></span></p>
                     
                               
                     <p>Corresponde al espacio que est&aacute; debajo de la barra superior
                                  (<span class="emphasis"><em>.cabecerainicial</em></span>) , y que est&aacute; reservado para
                                  incluir el t&iacute;tulo y la descripci&oacute;n de la aplicaci&oacute;n. Controlando el
                                  tama&ntilde;o, alineaci&oacute;n y el background del espacio.
                     </p>
                     
                               
                     <div class="informalexample">
                                    
                        
                                    <pre class="programlisting">.fondo_titaplic {
   width: 100%;
   height: 200px;
   vertical-align: bottom;
   background-attachment: fixed;
   background-repeat: no-repeat;
   background-position: center;
   background-color: #dfdfdf;
}</pre>
                                  </div>
                             
                  </li>
                  <li class="listitem">
                               
                     <p><span class="bold"><strong>.titulo_aplicacion:</strong></span></p>
                     
                               
                     <p>Controla las propiedades de la fuente del t&iacute;tulo que aparecer&aacute;
                                  en la pantalla principal, normalmente ser&aacute; el t&iacute;tulo de la
                                  aplicaci&oacute;n.
                     </p>
                     
                               
                     <div class="informalexample">
                                    
                        
                                    <pre class="programlisting">.titulo_aplicacion {
  font-size: 80px;
  font-weight: bold;
  color: #2C658F;    
}</pre>
                                  </div>
                             
                  </li>
                  <li class="listitem">
                               
                     <p><span class="bold"><strong>.descrip_titaplic:</strong></span></p>
                     
                               
                     <p>Corresponde al estilo que se le da a una peque&ntilde;a descripci&oacute;n
                                  que podemos tener encima del titulo de la aplicaci&oacute;n.
                     </p>
                     
                               
                     <div class="informalexample">
                                    
                        
                                    <pre class="programlisting">.descrip_titaplic {
  font-size: 20px;
  font-weight: bold;
  color: #000000;
}</pre>
                                  </div>
                     
                               
                     <p>Imagenes de ejemplo para las tres clases anteriores :</p>
                     
                               
                     <p>Imagen 1:</p>
                     
                               
                     <div class="mediaobject" align="center"><img src="images/5.png" align="middle"></div>
                     
                               
                     <p>Imagen 2:</p>
                     
                               
                     <div class="mediaobject" align="center"><img src="images/6.png" align="middle"></div>
                             
                  </li>
                  <li class="listitem">
                               
                     <p><span class="bold"><strong>.fondo_inicio:</strong></span></p>
                     
                               
                     <p>B&aacute;sicamente se especifica el color del fondo de la aplicaci&oacute;n,
                                  solo lo podremos ver reflejado en el espacio restante de la pagina
                                  inicial , que no esta ocupado por ventanas o men&uacute;s.
                     </p>
                             
                  </li>
                  <li class="listitem">
                               
                     <p><span class="bold"><strong>.cabecera_modulos:</strong></span></p>
                     
                               
                     <p>Controla color, alineaci&oacute;n de texto, tama&ntilde;o... de la barra que
                                  esta debajo del titulo de la aplicaci&oacute;n.
                     </p>
                             
                  </li>
                  <li class="listitem">
                               
                     <p><span class="bold"><strong>.datos_cabecera:</strong></span></p>
                     
                               
                     <p>Controla la presentaci&oacute;n del texto incluido en la cabecera
                                  anterior (m&oacute;dulos principales, herramientas auxiliares,
                                  administraci&oacute;n del sistema).
                     </p>
                             
                  </li>
                  <li class="listitem">
                               
                     <p><span class="bold"><strong>.menu_modulos:</strong></span></p>
                     
                               
                     <p>Color, fondo, fuente tama&ntilde;o de las entradas del men&uacute; de la
                                  aplicaci&oacute;n.
                     </p>
                     
                               
                     <div class="informalexample">
                                    
                        
                                    <pre class="programlisting">.menu_modulos {
   font-size: 14px;
   font-weight: bold; //cambiamos de normal a negrita
   color: #000000;    //el color lo ponemos a negro
   text-decoration: underline; //cambiamos de none a underline (subrayado)
}</pre>
                                  </div>
                     
                               
                     <p>Im&aacute;genes de ejemplo:</p>
                     
                               
                     <p>Imagen 1:</p>
                     
                               
                     <div class="mediaobject" align="center"><img src="images/7.png" align="middle"></div>
                     
                               
                     <p>Imagen 2:</p>
                     
                               
                     <div class="mediaobject" align="center"><img src="images/8.png" align="middle"></div>
                             
                  </li>
               </ul>
            </div>
            
                  
            <p>Una vez dentro de una de las opciones del men&uacute; podemos ver, dentro
                     de la ventana, una barra superior que contiene algunos datos de la
                     sesi&oacute;n actual, y debajo esta el formulario para trabajar con la
                     aplicaci&oacute;n:
            </p>
            
                  
            <div class="itemizedlist">
               <ul class="itemizedlist" type="disc">
                  <li class="listitem">
                               
                     <p><span class="bold"><strong>.barra_superior:</strong></span></p>
                     
                               
                     <p>Definir el estilo de la barra superior, donde est&aacute; el men&uacute;
                                  desplegable.
                     </p>
                             
                  </li>
                  <li class="listitem">
                               
                     <p><span class="bold"><strong>.txtcabecera:</strong></span></p>
                     
                               
                     <p>Controla las caracter&iacute;sticas (tama&ntilde;o, color, color-fondo,
                                  alineaci&oacute;n de texto,...) de la barra superior de la ventana actual
                                  (no la ventana inicial).
                     </p>
                     
                               
                     <div class="informalexample">
                                    
                        
                                    <pre class="programlisting">.txtcabecera {
   color: #F5EEE1;
   background-color: #0000cc;  //cambiamos el fondo de la cabecera a azul.
}</pre>
                                  </div>
                     
                               
                     <div class="mediaobject" align="center"><img src="images/9.png" align="middle"></div>
                             
                  </li>
                  <li class="listitem">
                               
                     <p><span class="bold"><strong>.formulariosBarra:</strong></span></p>
                     
                               
                     <p>Definir el estilo de la barra superior del panel, donde est&aacute;n
                                  los botones tooltip.
                     </p>
                             
                  </li>
                  <li class="listitem">
                               
                     <p><span class="bold"><strong>.bandaInferior:</strong></span></p>
                     
                               
                     <p>Define un color de fondo para dibujar una l&iacute;nea en la parte
                                  inferior de la barra superior de la ventana, donde aparece el men&uacute;
                                  desplegable.
                     </p>
                     
                               
                     <div class="mediaobject" align="center"><img src="images/barraMenu.png" align="middle"></div>
                             
                  </li>
                  <li class="listitem">
                               
                     <p><span class="bold"><strong>.barraSupPanel:</strong></span></p>
                     
                               
                     <p>Controla las caracter&iacute;sticas de la barra superior de una
                                  ventana. Esta barra est&aacute; situada directamente debajo de la barra
                                  superior de la ventana (<span class="emphasis"><em>.txtcabecera</em></span>).
                     </p>
                     
                               
                     <div class="informalexample">
                                    
                        
                                    <pre class="programlisting">.barraSupPanel {
  font-weight: bold;
  color: #ffff33;  //cambiamos el color de texto a amarillo .
  background-color: #A48669;
}</pre>
                                  </div>
                     
                               
                     <div class="mediaobject" align="center"><img src="images/10.png" align="middle"></div>
                             
                  </li>
                  <li class="listitem">
                               
                     <p><span class="bold"><strong>.barraSupTitulo:</strong></span></p>
                     
                               
                     <p>Estilo aplicable al t&iacute;tulo de la barra superior de un
                                  panel.
                     </p>
                     <div class="informalexample">
                                      
                        
                                      <pre class="programlisting">.barraSupTitulo {
  text-align: left;
}</pre>
                                    </div>
                             
                  </li>
                  <li class="listitem">
                               
                     <p><span class="bold"><strong>.barraSupBotones:</strong></span></p>
                     
                               
                     <p>Estilo aplicable a los botones tooltip de la barra superior de
                                  un panel.
                     </p>
                     <div class="informalexample">
                                      
                        
                                      <pre class="programlisting">.barraSupBotones {
    float:right; 
    display:inline; 
}</pre>
                                    </div>
                             
                  </li>
                  <li class="listitem">
                               
                     <p><span class="bold"><strong>.ayuda:</strong></span></p>
                     
                               
                     <p>Estilo correspondiente a la barra de ayuda que nos proporciona
                                  el plugin CWInfoContenedor y que aparecer&aacute; en la parte superior del
                                  panel.
                     </p>
                     <div class="informalexample">
                                      
                        
                                      <pre class="programlisting">.ayuda {
   width: auto;
   margin:0 auto;
   padding-left: 10px;
   background:#f7f2cf;
   -moz-border-radius: 10px;  
   -webkit-border-radius: 10px; 
   -webkit-box-shadow: 3px 3px 0 #DFDFDF;
   -moz-box-shadow: 3px 3px 0 #DFDFDF;
}</pre>
                                    </div>
                     <div class="mediaobject"><img src="images/ayuda.png"></div>
                             
                  </li>
                  <li class="listitem">
                               
                     <p><span class="bold"><strong>.textAyuda:</strong></span></p>
                     
                               
                     <p>Estilo aplicable al tipo de fuente con el que se mostrar&aacute; la
                                  ayuda en la barra de ayuda.
                     </p>
                     <div class="informalexample">
                                      
                        
                                      <pre class="programlisting">.textAyuda {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 10px;
   font-weight: bold;
   border: 0px;
   color: #4E4E4E;
}</pre>
                                    </div>
                             
                  </li>
                  <li class="listitem">
                               
                     <p><span class="bold"><strong>.formulariosBarra:</strong></span></p>
                     
                               
                     <p>Estilo del texto que aparece en la barra superior del panel,
                                  barra donde aparecer&aacute; el t&iacute;tulo de la ventana y los botones
                                  tooltip.
                     </p>
                             
                  </li>
                  <li class="listitem">
                               
                     <p><span class="bold"><strong>.barraInfPanel:</strong></span></p>
                     
                               
                     <p>Controla las caracter&iacute;sticas de la barra inferior del panel.
                                  Es la barra donde se incluir&aacute;n los botones (buscar, guardar,
                                  cancelar).
                     </p>
                             
                  </li>
                  <li class="listitem">
                               
                     <p><span class="bold"><strong>.paginador:</strong></span></p>
                     
                               
                     <p>Controla la apariencia del paginador, cuando la consulta nos
                                  devuelve m&aacute;s datos de los que se pueden visualizar en una sola
                                  p&aacute;gina, tanto cuando nos encontremos en modo registro como modo
                                  tabular.
                     </p>
                             
                  </li>
                  <li class="listitem">
                               
                     <p><span class="bold"><strong>.buttonPag:</strong></span></p>
                     
                               
                     <p>Dentro de la apariencia del paginador, con este controlamos el
                                  aspecto de las im&aacute;genes que aparecen en el paginador, las im&aacute;genes
                                  que se utilizan para desplazarse entre p&aacute;ginas, por ejemplo
                                  <span class="inlinemediaobject"><img src="images/anterior.gif"></span>, <span class="inlinemediaobject"><img src="images/10anterior.gif"></span>.
                     </p>
                             
                  </li>
                  <li class="listitem">
                               
                     <p><span class="bold"><strong>.solapas:</strong></span></p>
                     
                               
                     <p>Gestiona la presentaci&oacute;n de las solapas en general, (color del
                                  fondo, tama&ntilde;o, distancia entre la solapa y el borde del panel,
                                  ...).
                     </p>
                     
                               
                     <div class="mediaobject" align="center"><img src="images/11.png" align="middle"></div>
                     
                               
                     <div class="informalexample">
                                    
                        
                                    <pre class="programlisting">.solapas {
  clear:both;
  border-left:2px solid #8F8F8F;
  border-bottom:2px solid #8F8F8F;
  border-top:1px none #D2D2D2;
}</pre>
                                  </div>
                     
                               
                     <div class="mediaobject" align="center"><img src="images/12.png" align="middle"></div>
                             
                  </li>
                  <li class="listitem">
                               
                     <p><span class="bold"><strong>.solapa:</strong></span></p>
                     
                               
                     <p>Apariencia de las solapas inactivas, no seleccionadas.</p>
                             
                  </li>
                  <li class="listitem">
                               
                     <p><span class="bold"><strong>.esqSolapa:</strong></span></p>
                     
                               
                     <p>Apariencia de la esquina de la solapa (que tiene forma de
                                  tri&aacute;ngulo).
                     </p>
                             
                  </li>
                  <li class="listitem">
                               
                     <p><span class="bold"><strong>.opcion:</strong></span></p>
                     
                               
                     <p>Controlar la apariencia del titulo de una solapa inactiva
                                  (color, fuente, distancia a bordes, ...), no se refleja en la
                                  apariencia de la solapa activa.
                     </p>
                             
                  </li>
                  <li class="listitem">
                               
                     <p><span class="bold"><strong>.solapaActiva, .esqSolapaActiva y
                                        .opcionActiva:</strong></span></p>
                     
                               
                     <p>En este caso se controla la gesti&oacute;n de la solapa
                                  activa.
                     </p>
                             
                  </li>
                  <li class="listitem">
                               
                     <p><span class="bold"><strong>.infoFecha:</strong></span></p>
                     
                               
                     <p>Estilo que marca la apariencia del texto que indica el d&iacute;a de
                                  la semana que aparecer&aacute; al lado de un campo de texto de tipo
                                  fecha.
                     </p>
                     
                               
                     <div class="mediaobject" align="center"><img src="images/fecha.png" align="middle"></div>
                             
                  </li>
                  <li class="listitem">
                               
                     <p><span class="bold"><strong>.boton:</strong></span></p>
                     
                               
                     <p>Controla la apariencia de los botones (color, tama&ntilde;o, fondo,
                                  ...), botones que aparecen en la barra inferior de la
                                  pantalla.
                     </p>
                     
                               
                     <div class="informalexample">
                                    
                        
                                    <pre class="programlisting">.boton {
   color: #ffffff; 
   border: thin #857256 solid;
   background-color: #000000;
}</pre>
                                  </div>
                             
                  </li>
                  <li class="listitem">
                               
                     <p><span class="bold"><strong>.boton_on:</strong></span></p>
                     
                               
                     <p>Lo mismo que <span class="emphasis"><em>.boton</em></span> pero solo cuando el
                                  rat&oacute;n est&aacute; sobre el bot&oacute;n.
                     </p>
                     
                               
                     <div class="informalexample">
                                    
                        
                                    <pre class="programlisting">.boton_on {
  color: #F5EEE1;
  border: thin #F5EEE1 solid;
  background-color: #0000cc;//fondo azul cuando pasamos el rat&oacute;n por encima
}</pre>
                                  </div>
                             
                  </li>
                  <li class="listitem">
                               
                     <p><span class="bold"><strong>.enlace: </strong></span></p>
                     
                               
                     <p>Apariencia para los enlaces dentro de un campo de
                                  texto.
                     </p>
                             
                  </li>
                  <li class="listitem">
                               
                     <p><span class="bold"><strong>.editable y
                                        .noEditable:</strong></span></p>
                     
                               
                     <p>Para controlar la apariencia de los campos de texto editables
                                  y no editables respectivamente.
                     </p>
                     
                               
                     <div class="informalexample">
                                    
                        
                                    <pre class="programlisting">.editable {
  color: #857256; //color de texto de campos de texto editables amarillo
  border: 1px solid #857256;
  background-color: #0000cc; // fondo azul
}</pre>
                                  </div>
                     
                               
                     <p>Im&aacute;genes de ejemplo:</p>
                     
                               
                     <p>Imagen 1:</p>
                     
                               
                     <div class="mediaobject" align="center"><img src="images/13.png" align="middle"></div>
                     
                               
                     <p>Imagen 2:</p>
                     
                               
                     <div class="mediaobject" align="center"><img src="images/14.png" align="middle"></div>
                             
                  </li>
                  <li class="listitem">
                               
                     <p><span class="bold"><strong>.nuevo, .modificable,
                                        .borrar:</strong></span></p>
                     
                               
                     <p>Apariencia de un elemento del formulario (campo de texto,
                                  lista...), cuando nos encontramos en un panel tipo registro. Estilo
                                  .nuevo ser&aacute; el que corresponder&aacute; cuando el registro vaya a ser
                                  insertado, el .modificable, cuando el registro se vaya a modificar,
                                  y .borrar, por deducci&oacute;n, el registro estar&aacute; marcado para ser
                                  borrado.
                     </p>
                             
                  </li>
                  <li class="listitem">
                               
                     <p><span class="bold"><strong>.tablaNuevo, .tablaModificar,
                                        .tablaBorrar, .tablaInsertar:</strong></span></p>
                     
                               
                     <p>Lo mismo que hemos indicado antes para un panel registro pero
                                  si nos encontramos en un panel tabular.
                     </p>
                     
                               
                     <p>Imagen inicial, y c&oacute;digo de los cambios a aplicar:</p>
                     
                               
                     <div class="mediaobject" align="center"><img src="images/15.png" align="middle"></div>
                     
                               
                     <div class="informalexample">
                                    
                        
                                    <pre class="programlisting">.tablaModificar {
  font-weight: bold;
  color: #ffff00; //color del texto para una fila que se este modificando
  border: 3px solid #0000cc; //incrementamos el grosor del borde y el color de fondo.
}</pre>
                                  </div>
                     
                               
                     <div class="informalexample">
                                    
                        
                                    <pre class="programlisting">.tablaBorrar {
  color: #ff0000; //rojo
  background-color: #ffff00;  //amarillo
}</pre>
                                  </div>
                     
                               
                     <div class="informalexample">
                                    
                        
                                    <pre class="programlisting">.tablaInsertar {
  font-weight: bold;
  color: #ffffff; //cambiamos el color de texto para una fila nueva
  border: 1px solid #857256;
  background-color: #cc0033; //y tambi&eacute;n el color de fondo .
}</pre>
                                  </div>
                     
                               
                     <p>el resultado ser&aacute;:</p>
                     
                               
                     <div class="mediaobject" align="center"><img src="images/16.png" align="middle"></div>
                             
                  </li>
                  <li class="listitem">
                               
                     <p><span class="bold"><strong>.tablaEdi y
                                        .tablaNoEdi:</strong></span></p>
                     
                               
                     <p>Los campos de una tabla que son editables / noEditables
                                  (background, color texto, ...).
                     </p>
                             
                  </li>
                  <li class="listitem">
                               
                     <p><span class="bold"><strong>.cargando:</strong></span></p>
                     
                               
                     <p>Controla la apariencia del mensaje que aparece cuando una
                                  b&uacute;squeda o alguna operaci&oacute;n tarda m&aacute;s en ejecutarse.
                     </p>
                             
                  </li>
                  <li class="listitem">
                               
                     <p><span class="bold"><strong>.registro_par, .registro_par input,
                                        .registro_par select, .registro_impar, .registro_impar input,
                                        .registro_impar select:</strong></span></p>
                     
                               
                     <p>Estilos para definir filas pares e impares en un panel
                                  tabular.
                     </p>
                             
                  </li>
                  <li class="listitem">
                               
                     <p><span class="bold"><strong>.alerta, .aviso, .error,
                                        .sugerencia:</strong></span></p>
                     
                               
                     <p>Como se ha explicado en el <a class="link" href="ch03s09.html#C3Mensajes">cap&iacute;tulo
                                     3 punto Mensajes y Errores</a>, se clasifican los mensajes en
                                  cuatro tipos, estos estilos corresponden con cada uno de esos
                                  tipos.
                     </p>
                     
                               
                     <div class="informalexample">
                                    
                        
                                    <pre class="programlisting">.alerta {
  background-color: #FFE5C4;
}</pre>
                                  </div>
                             
                  </li>
                  <li class="listitem">
                               
                     <p><span class="bold"><strong>.alerta input, .alerta
                                        select</strong></span></p>
                     
                               
                     <p><span class="bold"><strong>.aviso input, .aviso
                                        select</strong></span></p>
                     
                               
                     <p><span class="bold"><strong>.error input, .error
                                        select</strong></span></p>
                     
                               
                     <p><span class="bold"><strong>.sugerencia input, .sugerencia
                                        select:</strong></span></p>
                     
                               
                     <p>Este aspecto se puede utilizar tambi&eacute;n para un marcado de
                                  aspecto de filas en un panel tabular, para ayudar a este marcado
                                  tambi&eacute;n se ha a&ntilde;adido para elementos de formulario que pueden
                                  aparecer en un tabular.
                     </p>
                     <div class="informalexample">
                                      
                        
                                      <pre class="programlisting">.alerta input {
  background-color: #FFE5C4;
}
.alerta select {
  background-color: #FFE5C4;
}</pre>
                                    </div>
                     
                               
                     <p>Imagen inicial y c&oacute;digo de los cambios que se
                                  aplicar&aacute;n:
                     </p>
                     
                               
                     <div class="mediaobject" align="center"><img src="images/17.png" align="middle"></div>
                     
                               
                     <p>Al cambiar el fondo de una fila, por ejemplo en modo alerta,
                                  vemos la diferencia en la primera y &uacute;ltima fila de la tabla.
                     </p>
                     
                               
                     <div class="informalexample">
                                    
                        
                                    <pre class="programlisting">.alerta {
  background-color: #FFFF00;  //cambiamos a color amarillo .
}
.alerta input {
  background-color: #FFFF00;
}
.alerta select {
  background-color: #FFFF00;
}</pre>
                                  </div>
                     
                               
                     <div class="mediaobject" align="center"><img src="images/18.png" align="middle"></div>
                             
                  </li>
                  <li class="listitem">
                               
                     <p><span class="bold"><strong>.fila_on: </strong></span></p>
                     
                               
                     <p>Controla la apariencia (p.ej su color de fondo) de una fila de
                                  una tabla cuando esta se seleccione.
                     </p>
                             
                  </li>
                  <li class="listitem">
                               
                     <p><span class="bold"><strong>.fila_on input, .fila_on
                                        select:</strong></span></p>
                     
                               
                     <p>Estilo de una fila_on que se aplica a los elementos html
                                  .
                     </p>
                             
                  </li>
                  <li class="listitem">
                               
                     <p><span class="bold"><strong>.fila_over: </strong></span></p>
                     
                               
                     <p>Apariencia de la fila cuando se pasa por el rat&oacute;n
                                  encima.
                     </p>
                             
                  </li>
                  <li class="listitem">
                               
                     <p><span class="bold"><strong>.fila_over input, .fila_over
                                        select:</strong></span></p>
                     
                               
                     <p>Estilo de una fila_over que se aplica a los elementos html
                                  .
                     </p>
                             
                  </li>
                  <li class="listitem">
                               
                     <p><span class="bold"><strong>.fila_borrada: </strong></span></p>
                     
                               
                     <p>Apariencia (b&aacute;sicamente el color) de una fila marcada como
                                  borrada de una tabla.
                     </p>
                             
                  </li>
                  <li class="listitem">
                               
                     <p><span class="bold"><strong>.fila_ borrada input, .fila_ borrada
                                        select:</strong></span></p>
                     
                               
                     <p>Estilo de fila borrada que se aplica a los elementos html
                                  .
                     </p>
                             
                  </li>
                  <li class="listitem">
                               
                     <p><span class="bold"><strong>.tabla_registros, .tabla_cabecera,
                                        .tabla_titulo, .columna_cabecera:</strong></span></p>
                     
                               
                     <p>Definir el estilo de la tabla que engloba los
                                  registros.
                     </p>
                             
                  </li>
                  <li class="listitem">
                               
                     <p><span class="bold"><strong>.linea_cabezera_tabla y
                                        .linea_separa_filas: </strong></span></p>
                     
                               
                     <p>Apariencia (grosor, color) de la l&iacute;nea que est&aacute; debajo de los
                                  nombres de las columnas de una tabla y apariencia de las l&iacute;neas
                                  entre filas de la tabla, respectivamente.
                     </p>
                             
                  </li>
                  <li class="listitem">
                               
                     <p><span class="bold"><strong>.cabecera_tabla, .tabla_titulo:
                                        </strong></span></p>
                     
                               
                     <p>Apariencia de la cabecera y el t&iacute;tulo de una tabla dentro de
                                  un panel.
                     </p>
                             
                  </li>
                  <li class="listitem">
                               
                     <p><span class="bold"><strong>.grupoCampos:</strong></span></p>
                     
                               
                     <p>Si necesitamos marcar un grupo de campos podemos utilizar este
                                  estilo.
                     </p>
                     
                               
                     <div class="informalexample">
                                    
                        
                                    <pre class="programlisting">.grupoCampos {
   color: #4E4E4E;
   border: 1px solid #4E4E4E;
   height: 18px;
}</pre>
                                  </div>
                     
                               
                     <div class="mediaobject"><img src="images/grupoCampos.png"></div>
                             
                  </li>
                  <li class="listitem">
                               
                     <p><span class="bold"><strong>.fondo_ (gris | azul | rojo &#8230;)
                                        .avisocorto , .avisolargo y codigoerror: </strong></span></p>
                     
                               
                     <p>Controlan la apariencia de los mensajes de alerta, aviso,
                                  sugerencia y error (colores de fondo b&aacute;sicamente), y tama&ntilde;o de texto
                                  y color, y alineaci&oacute;n de los diferentes tipos de aviso que se puedan
                                  lanzar.
                     </p>
                             
                  </li>
                  <li class="listitem">
                               
                     <p><span class="bold"><strong>.arbol:</strong></span></p>
                     
                               
                     <p>Apariencia del panel inicial de un &aacute;rbol (que est&aacute; en la parte
                                  izquierda de la ventana).
                     </p>
                             
                  </li>
                  <li class="listitem">
                               
                     <p><span class="bold"><strong>.arbolIgep :</strong></span></p>
                     
                               
                     <p>Controlar color, tama&ntilde;o, background del nodo ra&iacute;z del
                                  &aacute;rbol.
                     </p>
                             
                  </li>
                  <li class="listitem">
                               
                     <p><span class="bold"><strong>.arbolIgep a , .arbolIgep a:link ,
                                        .arbolIgep a:visited , .arbolIgep a:hover : </strong></span></p>
                     
                               
                     <p>Controlar apariencia del nodo ra&iacute;z dependiendo del su estado
                                  (visitado: visited , no visitado: link , y cuando se pasa el rat&oacute;n
                                  por encima sin pinchar : hover).
                     </p>
                             
                  </li>
                  <li class="listitem">
                               
                     <p><span class="bold"><strong>.arbolIgepSeleccionado a ,
                                        .arbolIgepSeleccionado a:link , .arbolIgepSeleccionado a:visited ,
                                        .arbolIgepSeleccionado a:hover : </strong></span></p>
                     
                               
                     <p>Lo mismo que en el caso anterior, pero solo se aplica cuando
                                  el nodo ra&iacute;z ha sido ya seleccionado y expandido. Por ejemplo,
                                  cuando se pasa el rat&oacute;n por encima del nodo ra&iacute;z, una vez este ha
                                  sido seleccionado y expandido, se aplica entonces el c&oacute;digo que est&aacute;
                                  en la secci&oacute;n .arbolIgepSeleccionado a:hover , y no el de arbolIgep
                                  a:hover .
                     </p>
                             
                  </li>
                  <li class="listitem">
                               
                     <p><span class="bold"><strong>.nodoIgep1 y nodoIgep1Seleccionado (con
                                        sus posibles opciones a:link a:hover ...etc ) : </strong></span></p>
                     
                               
                     <p>Igual para el caso anterior (que se aplicaba solo al nodo
                                  ra&iacute;z), pero se aplica en este caso solo a los nodo del &aacute;rbol de
                                  primer nivel (solo los que aparecen al expandir el nodo ra&iacute;z)
                                  .
                     </p>
                     
                               
                     <p>Imagen inicial y c&oacute;digo de los cambios a aplicar:</p>
                     
                               
                     <div class="mediaobject" align="center"><img src="images/19.png" align="middle"></div>
                     
                               
                     <p>Cambiamos el estilo de los nodos del nivel 1:</p>
                     
                               
                     <div class="informalexample">
                                    
                        
                                    <pre class="programlisting">.nodoIgep1 {
  font-size: small;
  font-style: italic;
  color: #857256; //cambiamos el color a negro
  text-decoration: none;
}

.nodoIgep1 a:link {
  text-decoration: none;
  color: #000000; //color nodos del primer nivel no visitados a negro 
}</pre>
                                  </div>
                     
                               
                     <p>y cambiamos el estilo cuando se pasa por el rat&oacute;n por encima
                                  de nodos de primer nivel del &aacute;rbol:
                     </p>
                     
                               
                     <div class="informalexample">
                                    
                        
                                    <pre class="programlisting">.nodoIgep1 a:hover {
  font-size: 20px ; //tama&ntilde;o mas grande
  color: #0000cc; //se cambia de color
  font-weight: bold;
  text-decoration: underline; //y el nodo se subraya
}</pre>
                                  </div>
                     
                               
                     <div class="mediaobject" align="center"><img src="images/20.png" align="middle"></div>
                             
                  </li>
                  <li class="listitem">
                               
                     <p><span class="bold"><strong>.nodoIgep2 y nodoIgep1Seleccionado (con
                                        sus posibles opciones a:link a:hover ...etc ) : </strong></span></p>
                     
                               
                     <p>Igual que nodoIgep1, pero aplicado en este caso solo a los
                                  nodos del segundo nivel y posteriores del &aacute;rbol.
                     </p>
                             
                  </li>
                  <li class="listitem">
                               
                     <p><span class="bold"><strong>.enlacebotonActivo : </strong></span></p>
                     
                               
                     <p>Controlar la apariencia del bot&oacute;n activo (pulsado actualmente)
                                  de un panel maestro-nDetalles.
                     </p>
                             
                  </li>
                  <li class="listitem">
                               
                     <p><span class="bold"><strong>.enlaceboton , .enlaceboton:link ,
                                        .enlaceboton:visit , .enlaceboton:hover :</strong></span></p>
                     
                               
                     <p>Controlan la apariencia para el resto de botones no activos
                                  del panel maestro-nDetalles (<span class="emphasis"><em>no visitados</em></span>:
                                  aplica la selecci&oacute;n de link, <span class="emphasis"><em>visitados</em></span>: aplica
                                  la de visited, <span class="emphasis"><em>cuando pasamos el rat&oacute;n por
                                        encima</em></span>: se aplica el c&oacute;digo en la secci&oacute;n hover).
                     </p>
                             
                  </li>
               </ul>
            </div>
                
         </div>
           
      </div>
      <div class="navfooter">
         <hr>
         <table width="100%" summary="Navigation footer">
            <tr>
               <td width="40%" align="left"><a accesskey="p" href="ch07s04.html">Anterior</a>&nbsp;
               </td>
               <td width="20%" align="center"><a accesskey="u" href="ch07.html">Subir</a></td>
               <td width="40%" align="right">&nbsp;<a accesskey="n" href="ch08.html">Siguiente</a></td>
            </tr>
            <tr>
               <td width="40%" align="left" valign="top">7.4. Envio de correo desde mi aplicaci&oacute;n&nbsp;</td>
               <td width="20%" align="center"><a accesskey="h" href="indice.html">Inicio</a></td>
               <td width="40%" align="right" valign="top">&nbsp;Cap&iacute;tulo 8. Bitacora de cambios aplicados a gvHidra</td>
            </tr>
         </table>
      </div>
   </body>
</html>